<template>
  <div class="mine-wrap">
    <div class="user-panel">
      <div class="user-icon">
        <img src="../../assets/logo.png" alt="">
      </div>
      <div class="user-info">
        <h3>会员昵称：<span>{{nick}}</span></h3>
        <p>注册时间：<span>{{enrolldate}}</span></p>
      </div>
    </div>
    <div class="mine-tabs">
      <router-link class="mine-tab" to="/changePass">
        <i class="iconfont icon-setup_fill"></i>
        <span>修改密码</span>
      </router-link>
      <router-link class="mine-tab" to="/updateInfo">
        <i class="iconfont icon-editor"></i>
        <span>完善资料</span>
      </router-link>
    </div>
    <button v-on:click="quit">注销登录</button>
    <router-view></router-view>
  </div>
</template>

<script>
  import {getCookie, delCookie} from "../../assets/js/cookie";
  import {getDateTime} from "../../assets/js/date";

  export default {
    name: "mine",
    data() {
      return {
        nick: '',
        enrolldate: ''
      }
    },
    mounted() {
      // 页面挂载获取保存的cookie值，渲染到页面上
      let uname = getCookie('username');
      console.log(uname);
      let data = {'uName': uname};
      this.$http.post('api/user/findUserinfo.do', data).then((res) => {
        console.log(res.data);
        if (res.data.state == 0) {
          let resp = res.data.data;
          this.nick = resp.nick;
          console.log(resp.nick);
          this.enrolldate = getDateTime(resp.enrolldate);
          console.log(resp.enrolldate);
        }
      }).catch((res) => {
        console.log(res.data.msg);
      })
    },
    methods: {
      changePass() {
        this.$router.push('/changePass');
      },
      quit() {
        // 删除cookie
        delCookie('username');
        setTimeout(function () {
          this.$router.push('/');
        }.bind(this), 1000);
      }
    }
  }
</script>

<style scoped lang="less">
  .mine-wrap {
    width: 100%;
    margin: 0 auto;
    .user-panel {
      width: 6rem;
      height: 1rem;
      background-color: slategrey;
      padding: 0.5rem 0.75rem;
      .user-icon {
        width: 1rem;
        height: 1rem;
        border: 1px solid #ffffff;
        border-radius: 100%;
        box-sizing: border-box;
        overflow: hidden;
        float: left;
        img {
          width: 100%;
          display: block;
        }
      }
      .user-info {
        width: 4.5rem;
        height: 1rem;
        float: right;
        color: #ffffff;
        text-align: left;
        h3 {
          font-size: 0.3rem;
          line-height: 0.5rem;
          font-weight: normal;
        }
        p {
          font-size: 0.3rem;
          line-height: 0.5rem;
        }
      }
    }
    .mine-tabs {
      width: 100%;
      height: auto;
      background-color: #ffffff;
      padding: 0.05rem 0;
      margin: 0.2rem auto 0;
      .mine-tab {
        width: 100%;
        height: 0.8rem;
        border-bottom: 1px solid #e1e1e1;
        display: block;
        font-size: 0.3rem;
        color: #666666;
        line-height: 0.8rem;
        &:last-of-type {
          border: none;
        }
        i.iconfont {
          display: block;
          float: left;
          margin: 0 0.3rem;
        }
        span {
          display: block;
          float: left;
        }
      }
    }
    button {
      width: 2rem;
      height: 0.7rem;
      background-color: #41b883;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      border: none;
      outline: none;
      margin: 0.5rem auto 0.3rem;
      display: block;
      font-size: 0.28rem;
      color: #ffffff;
      line-height: 0.7rem;
      text-align: center;
    }
  }
</style>
